<template>
  <div class="login">
    <van-nav-bar title="登录">
      <template #left>
        <van-icon name="cross" @click="getAway" />
      </template>
    </van-nav-bar>

    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round type="info" native-type="submit" @click="oLog()"
            >登录</van-button
          >
          <van-button round type="info" native-type="submit" @click="add"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      //   console.log("submit", values);
    },
    getAway() {
      this.$router.push({name:'Mine'})
    },
    add() {
      this.$router.push({ name: "Enroll" });
    },
    oLog() {
      if (this.username != "" && this.password != "") {
        let userInfo = JSON.parse(localStorage.getItem("userInfo"));
        if (!userInfo) {
          Toast("该账号未注册");
        } else {
          if (
            this.username == userInfo[0].userhome &&
            this.password == userInfo[0].userpassword
          ) {
            this.$router.push({ name: "Mine" });
            localStorage.setItem("codeyes", 200);
          }
        }
      } else {
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-icon-cross:before {
  color: darkgray;
}
.van-button {
  // width: 300px;
  width: 100%;
  display: block;
  margin: 10px auto;
}
.content {
  margin-top: 170px;
}
.login {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
</style>